{% extends "base.html" %}

{% import "bootstrap/wtf.html" as wtf %}
{% import "bootstrap/fixes.html" as fixes %}
{% import "bootstrap/utils.html" as util %}

{% block title %}Simulation{% endblock %}


{% block styles %}
    {{ super() }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.1/c3.min.css">
{% endblock %}

{% block scripts %}
    {{ super() }}
    {% include "dependencies/common.html" %}

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.1/c3.min.js"></script>

    <script>
        var chart = c3.generate({
            bindto: '#chart',
            data: {
                columns:
                    [
                        {% for resource, list in results.items() %}
                            [{{ resource|tojson }}, {{ list|join(',')}}
                            ],
                        {% endfor %}
                    ]
            }
        });
    </script>


{% endblock %}

{% block content %}
    <div class="container" style="margin-top: 50px">
        {{ util.flashed_messages(dismissible=True, container=False) }}

        <div class="page-header">
            <h1>{{ resource|upper }} Simulation</h1>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">Simulation between: {{ results.keys()|join(',') }}</div>
            <div class="panel-body">

                <div id="chart"></div>
                <p>This plot shows the relative number of pathways [0,1] in each database that contain at least x genes
                    of the common genes between the databases. In other words, we calculate the genes that are present
                    in all the databases displayed in this plot. Next, we calculate how many pathways in each database
                    have at least one gene that is present in all databases (X=1) and we continue to increase the
                    cutoff to at least 2, 3 genes, etc. Therefore, the x-axis represent the cutoff of genes that must be
                    in the pathway and in the y-axis the relative number of pathways containing at least the chosen
                    cutoff of genes.
                </p>
            </div>
        </div>

    </div>
    {% include "meta/footer.html" %}
{% endblock %}
